<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过ref获取dom元素和组件引用</title>
    <script src="../../js/vue.min.js"></script>
    <!-- 引入样式 组件库-->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-button @click="getElement">点我获取数据</el-button>
    <p ref="myP">xxxxxx</p>
    <login ref="mylogin"></login>
</div>
<script>
    let login = {
        template: '<h3>aaaaaa</h3>',
        data() {
            return {
                msg: '我是login组件的data中的属性'
            }
        },
        methods: {
            myMethod() {
                console.log("我是组件的方法");
            }
        }
    }
    new Vue({
        el: '#app',
        data: {},
        methods: {
            getElement() {
                //ref reference
                console.log("获取P标签中的内容", this.$refs.myP.innerText)
                //ref也可以引用组件
                console.log("获取组件中的内容", this.$refs.mylogin.msg)
                this.$refs.mylogin.myMethod()
            }
        },
        components: {
            login
        }
    })
</script>
</body>
</html>